<html>
    <head>
        <title>CSS动画 animation</title>
    </head>
    <body>
        <script>
            // CSS 动画  animation
                        /*
                                        CSS动画永华通CSS过渡，区别是在动画中 v-enter 类名在节点插入DOM后不会立即删除，而是在 animationend 事件触发时删除。

                                        eg: (省略了兼容性前缀)
                                                <div id="example-2">
                                                    <button v-on:click="show=!show"> Toggle Show </button>
                                                    <transition name ="bounce">
                                                        <p v-if="show"></p>
                                                    </transition>
                                                </div>
                                    */
                                    new Vue({
                                                    el:'#example-2',
                                                    data:{
                                                        show:true
                                                    }
                                                })

                                    /*
                                        .bounce-enter-active {
                                            animation: bounce-in .5s;
                                        }
                                        .bounce-leave-active {
                                            animation: bounce-in .5s reverse;
                                        }
                                        @keyframes bounce-in {
                                            0% {
                                                transform: scale(0);
                                            }
                                            50% {
                                                transform: scale(1.5);
                                            }
                                            100% {
                                                transform: scale(1);
                                            }
                                        }       
                                    */
        </script>
    </body>
</html>